import { Suspense, lazy } from 'react'
import type { RouteObject } from 'react-router-dom'
import Myloading from '@/components/Myloading'

type RouteRowType = RouteObject & { meta: Record<string, any> }

// 异步组件需要配合Suspense来完成渲染
const Dashoard = lazy(() => import('@/views/Dashoard'))
const User = lazy(() => import('@/views/User'))
const Role = lazy(() => import('@/views/Role'))
const Auth = lazy(() => import('@/views/Auth'))
const FilmList = lazy(() => import('@/views/FilmList'))
const FilmAdd = lazy(() => import('@/views/FilmAdd'))

export default [
  {
    index: true,
    element: <h3>后台页面，请选择要操作的其它页面</h3>
  },
  {
    path: 'info/dashoard',
    element: (
      <Suspense fallback={<Myloading />}>
        <Dashoard />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '后台信息' }, { title: '图形汇总' }]
    }
  },
  {
    path: 'sys/user',
    element: (
      <Suspense fallback={<Myloading />}>
        <User />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '后台设置' }, { title: '用户管理' }]
    }
  },
  {
    path: 'sys/role',
    element: (
      <Suspense fallback={<Myloading />}>
        <Role />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '后台设置' }, { title: '角色管理' }]
    }
  },
  {
    path: 'sys/auth',
    element: (
      <Suspense fallback={<Myloading />}>
        <Auth />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '后台设置' }, { title: '权限节点' }]
    }
  },
  {
    path: 'film/list',
    element: (
      <Suspense fallback={<Myloading />}>
        <FilmList />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '电影管理' }, { title: '电影列表' }]
    }
  },
  {
    path: 'film/add',
    element: (
      <Suspense fallback={<Myloading />}>
        <FilmAdd />
      </Suspense>
    ),
    meta: {
      breadcrumb: [{ title: '电影管理' }, { title: '新增电影' }]
    }
  }
] as RouteRowType[]
